<template>
  <v-image
    ref="image"
    @transformend="handleTransformEnd"
    :config="{ ...config, image: image }"
  >
  </v-image>
</template>
<script>
import Konva from 'konva';

export default {
  name: 'XSVGAnimation',
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
    this.setImage(this.config.src);
    //每个一个动画周期就重新渲染image_src指定的图像
    this.rerenderEveryTick()
  },
  methods: {
    //每个一个动画周期就重新渲染image_src指定的图像
    rerenderEveryTick () {
      const layer = this.$refs.image.getNode().getLayer();
      this.animation = new Konva.Animation(() => { }, layer);
      this.animation.start();
    },
    handleTransformEnd (...p) {
      this.$emit('transformend', ...p)
    },
    setImage (src) {
      const image = new window.Image();
      image.src = src;
      image.onload = () => {
        // set image only when it is loaded
        this.image = image;
      };
    }
  },
  data () {
    return {
      image: null,
      animation: null,
    };
  },
  watch: {
    "config.src": {
      async handler (newSrc) {
        console.log(newSrc, 'newSrc');
        this.setImage(newSrc);
      }
    }
  }

}
</script>
